<template>
	<view style="padding: 20rpx;">
		<view>
			<b>我的卡</b><small>(共<text v-text="cards.length"></text>张)</small>
		</view>
		
		<view style="margin-top: 30rpx;" v-for="card in cards">
			<view style="border: 1px solid #dddddd; border-radius: 10rpx; padding: 25rpx;">
				<uni-row>
					<uni-col :span="3">
						<image src="/static/wallet/zd_icon_txcg.png" style="width: 80rpx; height: 80rpx;"></image>
					</uni-col>
					<uni-col :span="14">
						<view><text v-text="card.bankName">银行名称</text></view>
						<view><small >可转账</small></view>
					</uni-col>
					<uni-col :span="7" style="text-align: right;">
							<text v-text="card.displayNo">****8872</text>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view style="text-align: center; margin-top: 30rpx;">
			<button type="primary" size="mini" style="width: 80%;" @click="toAddCard">
				<uni-icons type="plus-filled" size="15" color="#ffffff"></uni-icons>添加银行卡
			</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cards:{},
			}
		},
		onLoad() {
			// 加载银行卡列表
			uni.request({
				url: 'http://120.46.197.40:8080/api/userAccount/getUserCardInfo',
				method: 'GET',
				data: {
					userId: this.userId
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: (res) => {
					//console.log(res.data.data.nickName);
					let arr = res.data.data;
					for (let i = 0; i < arr.length; i++) {
						arr[i].displayNo="****"+arr[i].cardNo.substring(arr[i].cardNo.length-4);
					}
					this.cards = arr;
					//this.text = 'request success';
				}
			});
		},
		methods: {
			toAddCard() {
				uni.navigateTo({
					url: "/pages/home/wallet/addCard"
				})
			},
		}
	}
</script>

<style>

</style>
